<template>
	<Modal v-model="visible" :closable="false" :mask-closable="false" :footer-hide="true">
		<p class="title">请直接在键盘上输入新的快捷键</p>
		<Form ref="form" :model="form" :rules="rules" :label-width="0">
			<FormItem prop="content">
				<hotkey-input :hotkey.sync="form.content" placeholder=""></hotkey-input>
			</FormItem>
		</Form>
		<div class="footer">
			<Button class="btn btn-default" type="default" @click="handleCancel">取消</Button>
			<Button class="btn btn-primary" type="primary" @click="handleOk">确认</Button>
		</div>
	</Modal>
</template>
<script>
import hotkeyInput from './shortcut-input.vue'
export default {
	props: {
		value: {
			type: Boolean,
			default: false
		},
		hotkey: {
			type: Array,
			default: () => []
		}
	},
	components: {
		hotkeyInput
	},
	watch: {
		value(val) {
			this.visible = val
			if (val) {
				this.$refs.form.resetFields()
				this.$nextTick(() => {
					this.form.content = this.hotkey
				})
			} else {
				this.$emit('input', val)
			}
		}
	},
	computed: {},
	data() {
		return {
			visible: false,
			form: {
				content: []
			},
			rules: {
				content: [{ required: true, type: 'array', min: 1, message: '请设置快捷键', trigger: 'change' }]
			}
		}
	},
	methods: {
		handleCancel() {
			this.$emit('input', false)
		},
		handleOk() {
			this.$refs.form.validate((valid) => {
				console.log(this.form.content)
				if (valid) {
					this.$emit('on-ok', this.form.content[0])
					this.$emit('input', false)
				}
			})
		}
	}
}
</script>
<style lang="less" scoped>
/deep/.ivu-modal {
	width: 31.88rem;
	top: 3.5rem;
	// background-color: var(--bg-color);
}
/deep/.ivu-modal-body {
	padding: 2.5rem;
}
/deep/.ivu-modal-content {
	border-radius: 1.75rem;
}
/deep/.ivu-form-item {
	margin-bottom: 0;
	background-color: var(--bg-color);
}
.title {
	font-family: PingFangSC-Medium;
	text-align: center;
	color: var(--setting-text-title-color);
	font-size: 1.13rem;
}
.footer {
	text-align: center;
	.btn {
		margin-right: 2rem;
		border-radius: 1.8rem;
		padding: 0.5rem 2.05rem 0.5rem 2.05rem;
		height: 3rem;
	}
	.btn span {
		font-family: PingFangSC-Semibold;
		font-size: 1.13rem;
		letter-spacing: 0;
		line-height: 2rem;
		font-weight: 600;
	}
	.btn-default {
		background: var(--ivu-btn-default-bg, #c6c6c6);
		color: var(--ivu-btn-default-color, #fff);
		border: var(--ivu-btn-default-border, 1px solid #c6c6c6);
	}
	.btn-primary {
		background: #f59f33;
		.ivu-btn-primary {
			color: #fff;
			background-color: #f59f33;
			border-color: #f59f33;
		}
	}
	// /deep/.btn-default.ivu-btn:hover {
	// 	color: #515a6e;
	// 	border-color: #c6c6c602;
	// }
}
</style>
